<template>
  <view class="detail-view">
    <u-form label-width="140" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="客户名称" prop="name"
          ><u-input v-model="add_form.name" placeholder="请输入客户真实姓名"
        /></u-form-item>
        <u-form-item required label="登录账号" prop="mobile"
          ><u-input
            v-model="add_form.mobile"
            type="number"
            placeholder="请输入客户手机号"
        /></u-form-item>
        <u-form-item required label="客户类型" prop="type">
          <u-input
            @click="goPage('/pagesT/customer/selCustomerType')"
            class="dis-input"
            disabled
            v-model="type_name"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item
          label="账号状态"
          v-if="$accessCheck($Access.CustomerListUpdateCustomerStatus)"
        >
          <view class="form-value">
            <u-switch
              style="transform: translateY(14rpx)"
              v-model="add_form.enableStatus"
              :active-value="5"
              :inactive-value="4"
              size="40"
            ></u-switch>
          </view>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="联系人"
          ><u-input v-model="add_form.contact.name" placeholder="请输入联系人"
        /></u-form-item>
        <u-form-item label="联系电话"
          ><u-input
            v-model="add_form.contact.mobile"
            type="number"
            placeholder="请输入联系电话"
        /></u-form-item>
        <u-form-item label="'所属区域'">
          <u-input
            class="dis-input"
            @click="openSel('region_show')"
            v-model="region_name"
            disabled
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item label-position="top" label="详细地址"
          ><u-input
            v-model="add_form.address"
            type="textarea"
            placeholder="请输入"
        /></u-form-item>
        <u-form-item label="所属商铺">
          <u-input
            @click="goPage('/pagesT/shop/selShop')"
            class="dis-input"
            v-model="shop_name"
            disabled
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item label="分拣区">
          <u-input
            class="dis-input"
            disabled
            @click="goPage('/pagesT/werahouse/selReservoir')"
            v-model="reservoir_name"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="销售部门">
          <u-input
            @click="openSel('show_department')"
            v-model="department_name"
            class="dis-input"
            disabled
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item label="业务员">
          <u-input
            @click="
              goPage(
                '/pagesT/staff/selStaff?departmentId=' + add_form.departmentId
              )
            "
            class="dis-input"
            disabled
            placeholder="请选择"
            v-model="add_form.salesManName"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label-position="top" label="营业执照">
          <upload
            :images="add_form.extend.license ? [add_form.extend.license] : []"
            @handleRemove="imgRemove"
            @uploadSuccess="uploadSuccess"
          />
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="客户生日">
          <u-input
            class="dis-input"
            disabled
            @click="openSel('time_show')"
            v-model="birthday"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item label="备注" label-position="top"
          ><u-input type="textarea" v-model="add_form.remark"
        /></u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom">
      <view class="handel-btn" @click="submit">提交</view>
    </view>
    <SelDeparment
      v-model="show_department"
      @confirm="departmentConfirm"
      @cancel="departmentCancel"
    />
    <RegionSel
      v-model="region_show"
      @confirm="regionConfirm"
      @cancel="regionCancel"
    />
    <u-picker
      @confirm="birthdayConfirm"
      mode="time"
      v-model="time_show"
    ></u-picker>
  </view>
</template>

<script>
import upload from "@/components/qiniu/QiniuUpload.vue";
import SelDeparment from "@/components/SelDepartment.vue";
import RegionSel from "@/components/region/RegionSel.vue";
export default {
  components: { upload, SelDeparment, RegionSel },
  data() {
    return {
      region_show: false,
      time_show: false,
      show_department: false,
      shopData: "",
      staffData: "",
      reservoirData: "",
      customerTypeData: "",
      reservoir_name: "",
      shop_name: "",
      type_name: "",
      department_name: "",
      region_name: "",
      birthday: "",
      rules: {
        name: [
          {
            required: true,
            message: "请输入客户名称",
            // 可以单个或者同时写两个触发验证方式
            trigger: "blur,change",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入登录账号",
            // 可以单个或者同时写两个触发验证方式
            trigger: "blur,change",
          },
        ],
      },
      isEvidence: "", // 是否必填营业执照
      add_form: {
        tempSave: "",
        latitude: "",
        longitude: "",
        password: "",
        area: "",
        mobile: "",
        enableStatus: true, // 启用状态
        name: "",
        code: "",
        type: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        address: "",
        managerMobile: "",
        shopId: "", // 商铺的id
        departmentId: "", // 部门的id
        salesManId: "",
        salesManCode: "",
        salesManName: "",
        birthday: "",
        remark: "",
        reservoirId: "",
        extend: {
          license: "",
        },

        contact: {
          area: "",
          name: "",
          mobile: "",
          provinceCode: "",
          cityCode: "",
          districtCode: "",
          address: "",
        },
      },
      customer_id: "",
    };
  },
  watch: {
    reservoirData(val) {
      if (val) {
        this.add_form.reservoirId = val.id;
        this.reservoir_name = val.reservoirName;
      }
    },
    shopData(val) {
      if (val) {
        this.add_form.shopId = val.id;
        this.shop_name = val.name;
      }
    },
    customerTypeData(val) {
      if (val) {
        this.add_form.type = val.id;
        this.type_name = val.name;
        this.isEvidence = val.isEvidence;
      }
    },
    staffData(val) {
      if (val) {
        this.add_form.salesManId = val.id;
        this.add_form.salesManCode = val.staffCode;
        this.add_form.salesManName = val.staffName;
      }
    },
  },
  onLoad(options) {
    if (options.id) {
      this.customer_id = options.id;
      uni.setNavigationBarTitle({
        title: "修改客户信息",
      });
      this.getCustomerInfo();
    }
  },
  methods: {
    getCustomerInfo() {
      this.$u.api.getCustomerInfo(this.customer_id).then(({ data }) => {
        this.department_name = data.departmentName;
        this.shop_name = data.shopName;
        this.type_name = data.customerType;
        this.reservoir_name = data.reservoirName;
        this.region_name =
          data.area.provinceName + data.area.cityName + data.area.districtName;
        this.birthday = data.birthday
          ? this.$u.timeFormat(data.birthday, "yyyy-mm-dd")
          : "";
        this.add_form = {
          ...data,
          enableStatus: data.enableStatus === 5,
          contact: data.contact[0],
          extend: data.extend || {
            license: "",
          },
        };
      });
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.add_form.type) {
            this.$u.toast("请选择客户类型");
            return;
          }
          if (!this.$u.test.mobile(this.add_form.mobile)) {
            this.$u.toast("登录账号格式有误");
            return;
          }
          if (this.isEvidence === 5 && !this.add_form.extend.license) {
            this.$u.toast(
              `客户类型为【${this.type_name}】的客户必须【上传营业执照】`
            );
            return;
          }
          if (!this.customer_id) {
            this.$u.api
              .addCustomer({
                ...this.add_form,
                enableStatus: this.add_form.enableStatus ? 5 : 4,
              })
              .then((res) => {
                this.$u.toast("新增成功");
                setTimeout((res) => {
                  uni.navigateBack();
                }, 1500);
              });
          } else {
            this.$u.api
              .editCustomer(this.customer_id, {
                ...this.add_form,
                enableStatus: this.add_form.enableStatus ? 5 : 4,
              })
              .then((res) => {
                this.$u.toast("修改成功");
                setTimeout((res) => {
                  uni.navigateBack();
                }, 1500);
              });
          }
        }
      });
    },
    regionConfirm(val) {
      this.add_form.provinceCode = val[0].value;
      this.add_form.cityCode = val[1].value;
      this.add_form.districtCode = val[2].value;
      // 联系方式
      this.add_form.contact.provinceCode = val[0].value;
      this.add_form.contact.cityCode = val[1].value;
      this.add_form.contact.districtCode = val[2].value;
      let name = "";
      val.forEach((item) => {
        name += item.label;
      });
      this.region_name = name;
    },
    regionCancel(val) {
      this.region_show = false;
    },
    departmentConfirm(val) {
      this.add_form.departmentId = val[val.length - 1].value;
      this.department_name = val[val.length - 1].label;
      this.add_form.salesManId = "";
      this.add_form.salesManCode = "";
      this.add_form.salesManName = "";
    },
    departmentCancel(val) {
      this.show_department = false;
    },
    openSel(key) {
      this[key] = true;
      console.log(this.region_show, "region_show");
    },
    // 图片上传成功
    uploadSuccess(imgUrl) {
      this.add_form.extend.license = imgUrl;
    },
    //移除图片
    imgRemove(arr) {
      this.add_form.extend.license = "";
    },
    birthdayConfirm(val) {
      this.add_form.birthday = val.timestamp;
      this.birthday = val.year + "-" + val.month + "-" + val.day;
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
